<html>
<head>
    <title>单台设备详情</title>
    #parse("sys/header.html")

    <link rel="stylesheet" href="${rc.contextPath}/statics/css/index.css">
</head>
<body>
<div id="rrapp" v-cloak class="t_container">
    <header class="t_header">
        <span>单台设备监控平</span>
    </header>
    <main class="t_main">
        <!-- 第一行 -->
        <div class="t_left_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <div class="t_mbox t_rbox">
                <i></i>
                <span> 报警次数</span>
                <h2>{{ deviceMonitor.alarmCount }}</h2>
            </div>
            <div class="t_mbox t_ybox">
                <i></i>
                <span>故障次数</span>
                <h2>{{ deviceMonitor.faultCount }}</h2>
            </div>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
        <div class="t_center_box">
            <div class="t_top_box">
                <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
                <ul class="t_nav">
                    <li>
                        <span>{{deviceMonitor.baseInfo.devStatusDesc}}</span>
                        <h1>
                            <div v-if="deviceMonitor.baseInfo.devStatus == 1 || deviceMonitor.baseInfo.devStatus == -2" class="breathe-zc" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                            <div v-if="deviceMonitor.baseInfo.devStatus == 2" class="breathe-kx" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                            <div v-if="deviceMonitor.baseInfo.devStatus == 3" class="breathe-lx" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                            <div v-if="deviceMonitor.baseInfo.devStatus == 0" class="breathe-yc" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                            <div v-if="deviceMonitor.baseInfo.devStatus == -1" class="breathe-wz" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                        </h1>
                        <i></i>
                    </li>
                </ul>
                <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
            </div>
            <div class="t_bottom_box">
                <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
                <table class="t_table" style="border-top: 1px solid #053A98;margin-top: 5%;">
                    <tbody>
                    <tr>
                        <td>设备名称</td>
                        <td>{{ deviceMonitor.baseInfo.devName }}</td>
                    </tr>
                    <tr>
                        <td>所属产线</td>
                        <td>{{ deviceMonitor.baseInfo.line }}</td>
                    </tr>
                    <tr>
                        <td>所属工序</td>
                        <td>{{ deviceMonitor.baseInfo.process }}</td>
                    </tr>
                    <tr>
                        <td>设备当前状态</td>
                        <td>{{ deviceMonitor.baseInfo.devStatusDesc }}</td>
                    </tr>
                    <tr>
                        <td>持续时间</td>
                        <td>{{ deviceMonitor.baseInfo.duration }}分钟</td>
                    </tr>
                    </tbody>
                </table>
                <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
            </div>
        </div>
        <div class="t_right_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <h1 class="t_title">设备换件记录</h1>
            <div style="position:absolute;width:50%;height:3.6rem;overflow-y:auto;overflow-x:hidden;margin-top:12%;">
                <table class="t_table" style="position:absolute;width: 100%; max-height: 4.6rem;margin-top:0;">
                    <thead>
                    <tr>
                        <th style="text-align:center;">备件名称</th>
                        <th style="text-align:center;">数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in deviceMonitor.spareInfo">
                        <td>{{ item.NAME }}</td>
                        <td>{{ item.NUM }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <header class="t_b_h">
                <span>设备号</span>
                <h3>{{ deviceMonitor.baseInfo.devCode }}</h3>
            </header>
            <main class="t_b_m">
                <img :src="deviceMonitor.baseInfo.url" οnerrοr='this.src="${rc.contextPath}/statics/img/analyse/device_default.png"' alt="当前设备暂未设置图片">
            </main>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
        <!-- 第二行 -->
        <div class="b_left_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <div id="chart_2" class="echart"
                 style="width: 90%;min-width:300px; height: 4rem; position: relative;"></div>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
        <div class="b_center_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <div id="chart_1" class="echart"
                 style="width: 100%; height: 3.3rem; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
            </div>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
        <div class="b_right_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <div id="chart_4" class="echart"
                 style="width: 100%; height: 3.3rem; position: absolute; -webkit-tap-highlight-color: transparent; user-select: none;"></div>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
    </main>
</div>

</body>
<script type="text/javascript" src="${rc.contextPath}/statics/plugins/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/js/device/rem.js"></script>
<script type="application/javascript">
    var vm = new Vue({
        el: "#rrapp",
        data: {
            timer: '',
            echartDom1: "",
            echartDom2: "",
            echartDom4: "",
            deviceMonitor: {
                alarmCount: 12,
                faultCount: 3,
                baseInfo: {
                    devCode: 'CPO-8859',
                    devName: 'SW机床',
                    devProductName: 'NE1系列机加线',
                    currentStatus: '正常',
                    longTime: '56小时32分钟',
                    faultCode: '000',
                    faultName: '暂无故障',
                    url: '${rc.contextPath}/statics/img/analyse/left_line.png'
                },
                spareInfo: [], // 设备换件记录
                statusDate: '',
                faultDate: ''
            },
            option1: {
                color: ['#6ec56f','#f8e567','#a5a5a5','#f10606','#4472c4'],
                title: {
                    text: '设备状态时间分布统计',
                    top: 10,
                    left: 5,
                    textStyle: {
                        fontSize: 18,
                        color: '#fff'
                    },
                    subtext: ""
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",

                },
                series: [{
                    name: '设备状态',
                    type: 'pie',
                    radius: ['0', '60%'],
                    center: ['50%', '60%'],
                    color: ['#6ec56f','#f8e567','#a5a5a5','#f10606','#4472c4'],
                    label: {
                        normal: {
                            formatter: '{b}\n{d}%'
                        },

                    },
                    data: []
                }]
            },
            option2: {
                color: ['#4472c4', '#ed7d31'],
                title: {
                    text: '设备故障报警对比统计',
                    top: 10,
                    left: 5,
                    textStyle: {
                        color: '#FFF',
                    },
                    subtext: ""
                },
                legend: {
                    data: ['报警次数', '故障次数'],
                    top: 5,
                    left: 'center',
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['06-01', '06-02', '06-03', '06-04', '06-05', '06-06', '06-07'],
                    axisLabel: {
                        color: '#1AA1FD',
                        interval: 0,
                        rotate: 45
                    }
                },
                yAxis: [{
                    axisLine: {
                        lineStyle: {
                            color: '#aAAaFD',
                        }
                    },
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: '#1AA1FD'
                        }
                    },
                    axisLabel: {
                        mininterval: 1
                    }
                },
                    {
                        axisLine: {
                            lineStyle: {
                                color: '#aAAaFD',
                            }
                        },
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: '#1AA1FD'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '报警次数',
                        data: [30, 50, 10, 5, 2, 0, 5],
                        type: 'bar'
                    },
                    {
                        name: '故障次数',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: [25, 80, 90, 90, 90, 90, 100]
                    }
                ]
            },
            option4: {
                color: ['#e72325', '#98e002', '#2ca3fd', '#4472c4', '#ed7d31', '#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'],
                title: {
                    text: '故障时长统计',
                    x: 'center',
                    textStyle: {
                        color: '#FFF'
                    },
                    top: 10,
                    left: 5,
                    subtext: ""
                },
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}: {c} ({d}%)",

                },
                labelLine: {
                    show: false
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['0', '60%'],
                        center: ['50%', '60%'],
                        selectedMode: 'single',
                        label: {
                            normal: {
                                formatter: "{b}: {c}分钟({d}%)"
                            }
                        },
                        data: []
                    }
                ]
            }
        },
        method: {
            init: function () {
                let dom2 = document.getElementById("chart_2");
                vm.echartDom2 = echarts.init(dom2);
                vm.echartDom2.setOption(vm.option2, true);
                let dom1 = document.getElementById("chart_1");
                vm.echartDom1 = echarts.init(dom1);
                vm.echartDom1.setOption(vm.option1, true);
                let dom4 = document.getElementById("chart_4");
                vm.echartDom4 = echarts.init(dom4);
                vm.echartDom4.setOption(vm.option4, true);
            },
            getInfo: function () {
                Ajax.request({
                    url: "../device/stat/deviceMonitor?devCode=" + getQueryString("devCode"),
                    async: true,
                    successCallback: function (r) {
                        if (r.code == 0) {
                            if (r.deviceMonitor.baseInfo) {
                                vm.deviceMonitor.baseInfo = r.deviceMonitor.baseInfo;
                            }
                            vm.deviceMonitor.alarmCount = r.deviceMonitor.alarmCount;
                            vm.deviceMonitor.faultCount = r.deviceMonitor.faultCount;
                            vm.deviceMonitor.spareInfo = r.deviceMonitor.spareInfo;
                            // 设置设备状态时长统计分布
                            let devStatusDurationStat = r.deviceMonitor.devStatusDurationStat;
                            if(devStatusDurationStat){
                                vm.option1.series[0].data = devStatusDurationStat.seriesData;
                            }else{
                                vm.option1.title.subtext = "无数据";
                            }
                            vm.echartDom1.setOption(vm.option1, true);

                            vm.option4.series[0].data = r.deviceMonitor.faultDate;
                            if (vm.option4.series[0].data.length < 1) {
                                vm.option4.title.subtext = "无数据";
                            }
                            vm.echartDom4.setOption(vm.option4, true);

                            vm.option2.xAxis.data = r.deviceMonitor.x;
                            vm.option2.series[0].data = r.deviceMonitor.y1;
                            vm.option2.series[1].data = r.deviceMonitor.y2;
                            if (vm.option2.series[0].data.length < 1 && vm.option2.series[1].data.length < 1) {
                                vm.option2.title.subtext = "无数据";
                            }
                            vm.echartDom2.setOption(vm.option2, true);
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            }
        },
        beforeDestroy: function () {
            clearInterval(this.timer);
        }
    });
    vm.$options.method.init();
    vm.$options.method.getInfo();
    // 每五分钟刷新一次
    vm.timer = setInterval(vm.$options.method.getInfo, 300000);
    window.onresize = function () {
        vm.echartDom2.resize();
        vm.echartDom1.resize();
        vm.echartDom4.resize();
    }
    $(window).trigger('resize');
</script>
</html>
